<template>
  <div>
    <el-container><!--style="height: 900px;"-->

      <el-header style="text-align:right; font-size: 15px; background-color: white; width: auto">
        <img src="/static/img/NSMS.jpg" style="float: left; width: 150px;height: 60px" alt="#">

        <div>
          <div style="float: right;margin-top: 3px">
            <!--在下拉选项控件中，要在el-dropdown标签下添加@command才能被触发按钮效果-->
            <el-dropdown @command="exitLogin">
              <span class="el-dropdown-link">
                <el-avatar size="large" src="/static/img/user.jpg"></el-avatar>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>


          <div style="margin-right: 13px;padding-top: 15px; float: right">{{$store.state.loginName}}</div>
          <el-badge :value="3" :max="10" class="item">
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-bell" ></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>查看</el-dropdown-item>
                <el-dropdown-item>新增</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-badge>
        </div>
      </el-header>

      <el-container>

        <el-menu :default-active="activeTitle" class="el-menu-vertical-demo" @open="handleOpen"
                 @close="handleClose" :collapse="isCollapse" :collapse-transition="false">
          <div v-if="isCollapse === true" style="margin-left: 1px">
            <el-radio-group v-model="isCollapse" >
              <el-radio-button :label="false">展开</el-radio-button>
              <el-radio-button :label="true" >收起</el-radio-button>
            </el-radio-group>
          </div>
          <div v-if="isCollapse === false" style="margin-left: 25px">
            <el-radio-group v-model="isCollapse">
              <el-radio-button :label="false">展开</el-radio-button>
              <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>
          </div>

          <div v-if="isCollapse === false" class="smallblock" style="margin-top: 10px">排班模块</div>
          <router-link to="/Main">
            <el-menu-item index="1" @click="addTab(titleNames[0].titleName)" >
              <i class="el-icon-s-home"></i>
              <span slot="title">{{titleNames[0].titleName}}</span>
            </el-menu-item>
          </router-link>

          <router-link to="/Scheduling">
            <el-menu-item index="2" @click="addTab(titleNames[1].titleName)" >
              <i class="el-icon-setting"></i>
              <span slot="title">{{titleNames[1].titleName}}</span>
            </el-menu-item>
          </router-link>

          <div v-if="isCollapse === false"  class="smallblock">信息管理模块</div>

          <router-link to="Administration">
            <el-menu-item index="3" @click="addTab(titleNames[2].titleName)" >
              <i class="el-icon-document"></i>
              <span slot="title">{{titleNames[2].titleName}}</span>
            </el-menu-item>
          </router-link>

          <router-link to="Center">
            <el-menu-item index="4" @click="addTab(titleNames[3].titleName)" >
              <i class="el-icon-user"></i>
              <span slot="title">{{titleNames[3].titleName}}</span>
            </el-menu-item>
          </router-link>

      </el-menu>

        <el-main>
          <!--<div style="margin-bottom: 20px;">
            <el-button
              size="small"
              @click="addTab(editableTabsValue)"
            >
              add tab
            </el-button>
          </div>-->
          <el-tabs v-model="editableTabsValue" type="card" closable
                   @tab-remove="removeTab" :click="selectTitle()" style="background-color: white">
            <el-tab-pane
              v-for="(item, index) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
              >
            </el-tab-pane>
          </el-tabs>

          <!--在这里展示视图-->
          <router-view />
          <!--插入部分-->

        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;

  }
   .smallblock{
     font-size: 13px;
     color: darkgray;
     margin-left: 15px;
     margin-top: 1px;
     margin-bottom: 1px;
  }
  /*顶部小红点*/
  .item {
    margin-top: 20px;
    margin-right: 20px;
    float: right
  }

  /*去除下划线*/
  a {
    text-decoration: none;
  }
  .router-link-active {
    text-decoration: none;
  }
</style>

<script>
  import {ASTElement as editableTabs} from "vue-template-compiler";
  import store from "../vuex/store";

  export default {
    name: 'Frame',
    //props:['username'],
    data() {
      return {
        activeTitle: "1", //激活左侧标签的状态
        isCollapse: true,
        titleNames: [{
          titleIndex: 1,
          titleName: "主页",
        },{
          titleIndex: 2,
          titleName: "排班",
        },{
          titleIndex: 3,
          titleName: "护士和助手管理",
        },{
          titleIndex: 4,
          titleName: "个人信息管理中心",
        }],

        editableTabsValue: '0',  //激活上面标签的状态
        editableTabs: [{
          title: '主页',
          name: '1',
        }],
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      //标签状态绑定左边功能栏状态
      selectTitle(event){
        //console.log("event "+event);
        //console.log(this.editableTabsValue);
        this.activeTitle = this.editableTabsValue;
        if (this.activeTitle === "1"){
          this.$router.push({path:'/Main'});
        }
        if(this.activeTitle === "2"){
          this.$router.push({path:'/Scheduling'});
        }
        if(this.activeTitle === "3"){
          this.$router.push({path:'/Administration'});
        }
        if(this.activeTitle === "4"){
          this.$router.push({path:'/Center'});
        }
      },
      //自定义增加标签页触发器
      addTab(targetName) {
        /*this.editableTabs.forEach((tab, index) =>{
          console.log(tab.title);
          console.log("--------------");
          if (tab.title !== targetName) {
            console.log(tab.title);
          }
        });*/

        //console.log(targetName);
        //防止产生过多的标签
        for (const tab of this.editableTabs){
          if (tab.title === targetName) {
            //console.log(tab.content);
            this.editableTabsValue = tab.name;
            return;
          }
        }

        //添加新的标签，并绑定左侧模块的index
        for (const tab of this.titleNames){
          if (tab.titleName === targetName) {
            //console.log(tab.titleIndex);
            let newTabName = tab.titleIndex+"";
            this.editableTabs.push({
              title: targetName,
              name: newTabName,
            });
            this.editableTabsValue = newTabName;
          }
        }
        /*let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: targetName,
          name: newTabName,
          content: targetName
        });
        this.editableTabsValue = newTabName;
      }*/
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
      //退出登录
      exitLogin(){
        this.$store.commit("reduction");
        this.$router.push('/Login');
      }
    }

  }
</script>
